<template>
  <z-paging @query="queryList" :refresher-enabled="true" ref="paging" v-model="dataList" class="">
    <template slot="top">
      <view class="margin-x-10 margin-top-10 padding-10 color-bg-fff" style="border-radius: 20rpx 20rpx 0 0 ;">
        <view class="flex-start padding-10" style="background: #f1f5ff;">
          <view class="color-main padding-left-10" style="width: 60%;">名称和开始时间</view>
          <view class="color-main">状态</view>
        </view>
      </view>
    </template>
    <view class="margin-x-10 padding-10 color-bg-fff">
      <view class="padding-10" v-for="(item, index) in dataList" :key="index">
        <view class="flex-start">
          <view style="width: 60%;">
            <view class="color-333 margin-bottom-10">{{ item.examName }}</view>
            <view class="color-999 font-12">{{ item.examDescription }}</view>
            <view class="color-999 font-12 margin-top-5">
              考试时长：{{ item.examDuration }}分钟 | 总分：{{ item.totalScore }}分 | 及格分：{{ item.passScore }}分
            </view>
          </view>
          <view class="flex-start" style="width: 30%;">
            <view class="status"
              :style="{ background: item.statusColor }">
            </view>
            <view class="color-333 font-12">{{ item.statusText }}</view>
          </view>
          <view @click="goPage('/pages/work/test/form?id=' + item.id)" class="color-main">报名</view>
        </view>
        <u-line margin="30rpx 0 0 0"></u-line>
      </view>
    </view>
  </z-paging>
</template>

<script>
import { getMyClassExams } from '@/api/examation/examation'

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dataList: [],
    }
  },
  methods: {
    queryList(pageNum, pageSize) {
      this.queryParams.pageNum = pageNum;
      this.queryParams.pageSize = pageSize;
      this.getList();
    },
    async getList() {
      try {
        const response = await getMyClassExams(this.queryParams);
        
        // 处理数据格式，根据examStatus字段设置状态
        const processedData = response.rows.map(item => ({
          ...item,
          statusText: this.getStatusText(item.examStatus),
          statusColor: this.getStatusColor(item.examStatus)
        }));
        
        this.$refs.paging.complete(processedData);
      } catch (error) {
        console.error('获取考试列表失败:', error);
        this.$refs.paging.complete([]);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
    // 根据examStatus获取状态文本
    getStatusText(examStatus) {
      switch (examStatus) {
        case '0':
          return '未开始';
        case '1':
          return '进行中';
        case '2':
          return '已结束';
        default:
          return '未知';
      }
    },
    // 根据examStatus获取状态颜色
    getStatusColor(examStatus) {
      switch (examStatus) {
        case '0':
          return '#FFA940'; // 未开始 - 橙色
        case '1':
          return '#5BA2F9'; // 进行中 - 蓝色
        case '2':
          return '#4CD964'; // 已结束 - 绿色
        default:
          return '#999999'; // 未知 - 灰色
      }
    },
    goPage(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.status {
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  vertical-align: middle;
}
</style>